<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :height="height"
    :row-key="rowKey"
    :border="border"
    :row-style="{ height: rowHeight+'px', padding:0}"
    :cell-style="{ padding: 0,height: rowHeight+'px' }"
    @sort-change="handleSortChange"
    @select="handleSelectItem"
    @select-all="handleSelectAll"
  >
    <!-- 序号 -->
    <el-table-column v-if="index" label="序号" type="index"> </el-table-column>
    <!-- 多选框 -->
    <el-table-column v-if="checkbox" type="selection"></el-table-column>
    
    <!-- 模板 -->
    <template v-for="(item,index) in column">
        <!-- 自定义slot插槽模板 -->
      <el-table-column v-if="item.slot" :key="index" :sort-method="item.method" :sortable="item.sort" :sort-by="item.sort_by"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        :align="item.align"
        :formatter="item.formatter"
      >
      <template v-slot="{row}">
       <slot :scope="row" :name="item.slot"/>
      </template>

       </el-table-column>
      <!-- 默认 -->
    <el-table-column v-else :key="item.prop"
      :prop="item.prop"
      :sortable="item.sort"
      :sort-by="item.sort_by"
      :sort-method="item.method"
      :label="item.label"
      :width="item.width"
      :fixed="item.fixed"
      :align="item.align"
        :formatter="item.formatter"
      :show-overflow-tooltip="item.toolstip"
    >
    </el-table-column>
     

    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    //表格数据
    tableData: {
      type: Array,
      required: true,
      defalut: () => [],
    },
    //列数据配置
    column: {
      type: Array,
      required: true,
      defalut: () => [],
    },
    //序号
    index: {
      type: Boolean,
      defalut: false,
    },
    //多选框
    checkbox: {
      type: Boolean,
      defalut: false,
    },
    //  边框
    border: {
      type: Boolean,
      defalut: false,
    },
    //table高度
    height: {
      type: Number,
    },
    //表格行高度
    rowHeight:{
      type:Number,
      default:100
    },
    //树形结构
    rowKey:{
      type:String
    }
  },
  methods: {
    //排序-后台排序
    handleSortChange({ column, prop, order }){
    
    this.$emit('sort-change',{ column, prop, order })
    },
    //当用户手动勾选数据行的 Checkbox 时触发的事件
    handleSelectItem(selection){
        this.$emit('select',selection)
    },
    //当用户手动勾选全选 Checkbox 时触发的事件
    handleSelectAll(selection){
       this.$emit('select-all',selection) 
    }
  },
};
</script>

<style scoped>

</style>